<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>履约看板</title>
	<link rel="shortcut icon" href="./static/image/favicon.ico">
	<link rel="stylesheet" type="text/css" href="./static/libs/element-ui/index.css">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css">
	<link rel="stylesheet" type="text/css" href="./static/css/m_tailwind.css">
	<style>
		.performance-kanban {
			padding: 24px;
		}
		.row1 {
			margin-top: 16px;
			height: 96px;
			background: #FAFAFA;
	    font-size: 14px;
	    color: rgba(0,0,0,.32);
	    font-weight: 400;
		}
		.row2 {
	    border: 1px solid rgba(0,0,0,.08);
	    -moz-border-radius: 6px;
	    border-radius: 6px;
	    padding: 16px;
	    margin-top: 16px;
		}
		.delivery-list {
			display: flex;
			grid-gap: 8px;
    	gap: 8px;
		}
		.delivery-list .item {
			flex: 1;
			display: flex;
			align-items: flex-start;
		}
		.delivery-list .item i {
			position: relative;
			top: 4px;
			margin-right: 8px;
			width: 14px;
	    height: 14px;
	    border-radius: 3px;
		}
		.delivery-list .item .title {
			color: rgba(0,0,0,.8);
	    font-size: 14px;
	    font-weight: 400;
	    display: flex;
	    align-items: center;
		}
		.delivery-list .item .num1 {
	    font-size: 24px;
	    color: rgba(0,0,0,.8);
	    font-weight: 600;
	    margin-top: 8px;
		}
		.delivery-list .item .num2 {
	    font-size: 12px;
	    color: rgba(0,0,0,.4);
	    font-weight: 400;
	    margin-top: 12px;
		}
		.chat-box {
			margin-top: 16px;
			height: 318px;
		}
		.row3 {
	    border: 1px solid rgba(0,0,0,.08);
	    -moz-border-radius: 6px;
	    border-radius: 6px;
	    margin-top: 16px;
		}
		.row3 .notice {
			display: flex;
			align-items: center;
			height: 60px;
			background: linear-gradient(#fffbf4,#fff6e6);
    	padding: 0 16px;
		}
		.row3 .notice > img {
			width: 52px;
    	height: 52px;
		}
		.row3 .notice .text {
			flex: 1;
			width: 0;
			font-size: 16px;
			margin-right: 7px;
		}
	</style>
</head>
<body>

	<div id="app" v-cloak>
		<m-layout>
			<div class="performance-kanban">
				<m-tabs v-model="form.aaa" :options="['备货单量维度', '备货件量维度']" type="2" style="margin-bottom:24px;"></m-tabs>
				<m-tip style="margin-bottom: 24px;">尊敬的Temu卖家，平台要求紧急单最迟 24h 发货，普通单最迟 48h 发货。建议您当天立即发出，逾期可能的影响：仍可发出，但可能影响后续上新、首单审核、可备货量、活动报名、竞价结果、流量权重等相关权益。详情请查看<span style="color:#0071f3;">《注意事项》</span></m-tip>
				<div class="flex-left-center" style="margin-bottom: 24px;">
					<el-select style="width:100px;" size="mini" v-model="form.aaa" placeholder="请选择" @change="changeTimeType">
				    <el-option v-for="item in time_type" :key="item" :label="item" :value="item"></el-option>
				  </el-select>
				  <el-date-picker style="width:400px" size="mini"
			      v-model="form.bbb"
			      type="daterange"
			      range-separator="至"
			      start-placeholder="开始日期"
			      end-placeholder="结束日期"
			      value-format="yyyy-MM-dd"
			      :clearable="false">
			    </el-date-picker>
				</div>
				<m-title1 name="整体表现"></m-title1>
				<!-- <div class="flex-center row1" style="margin-bottom: 24px;">暂无数据</div> -->
				<div class="mt-10 mb-20" style="border:1px solid #FFDAA3;border-radius:6px;overflow: hidden;">
					<expressive-outcomes :data="expressiveOutcomes"></expressive-outcomes>
				</div>

				<m-title1 name="发货情况">
					<div slot="extra" class="flex flex-1 w-0 pl-10 color-gray-600 text-12 font-normal">
						<div class="mr-20">统计时间：{{form.bbb.join('~')}}</div>
						<div>环比周期：{{form.bbb.join('~')}}</div>
					</div>
				</m-title1>
				<div class="row2">
					<div class="delivery-list">
						<div v-for="(item, index) in chat1.list" :key="index" class="item">
							<i :style="{'background-color': item.color}"></i>
							<div>
								<div class="title">{{item.name}}</div>
								<div class="num1">{{item.num1}}%</div>
								<div class="num2">环比 <num-type1 :data="item.num2"></num-type1></div>
							</div>
						</div>
					</div>
					<div class="flex-center chat-box">
						<!-- <m-empty></m-empty> -->
						<m-charts :options="option1"></m-charts>
					</div>
				</div>
				<div class="row3">
					<div class="notice">
						<img src="./static/image/img23.png">
						<div class="text">加发货台次数过于频繁表示发货效率较低，创单、装箱耗时将会影响履约表现，请保持关注，提高效率！</div>
						<el-select style="width:192px;" size="mini" v-model="form.ccc" placeholder="请选择">
					    <el-option v-for="item in bh_type" :key="item" :label="item" :value="item"></el-option>
					  </el-select>
					</div>
					<div style="padding: 16px;">
						<div class="delivery-list">
							<div v-for="(item, index) in chat2.list" :key="index" class="item">
								<template v-if="item.name">
									<i :style="{'background-color': item.color}"></i>
									<div>
										<div class="title">{{item.name}}</div>
										<div class="num1">{{item.num1}}%</div>
										<div class="num2">环比 <num-type1 :data="item.num2"></num-type1></div>
									</div>
								</template>
							</div>
						</div>
						<div class="chat-box flex-center">
							<m-empty></m-empty>
							<!-- <m-charts :options="option2"></m-charts> -->
						</div>
					</div>
				</div>
			</div>
		</m-layout>
	</div>

	<script src="./static/libs/vue2.6.8/vue.min.js"></script>
	<script src="./static/libs/element-ui/index.min.js"></script>
	<script src="./static/libs/echarts5.4.3.js"></script>
	<script src="./static/js/Tools.js"></script>
	<script src="./config/performanceKanban.js"></script>
	<script src="./static/components/common.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data() {
				return {
					form: {
						aaa: '近7日',
						bbb: '',
						ccc: '48H全部备货单',
					},

					time_type: ["自定义", "近7日"],
					bh_type: ['48H全部备货单', '24H全部备货单', '24H紧急备货单', '48H普通备货单'],
				
					// 表现结果
        expressiveOutcomes: CONFIG.expressiveOutcomes,

					// 配置1
					chat1: CONFIG.chat1,
					option1: null,
					// 配置2
					chat2: CONFIG.chat2,
				}
			},
			mounted() {
				// 时间
				this.changeTimeType(this.form.aaa);
				// 配置
				this.option1 = this.getOption(CONFIG.chat1);
				// this.option2 = this.getOption(CONFIG.chat2);
			},
			methods: {
				changeTimeType(value) {
					if(value == '近7日') {
						var date = new Date();
						var last = Tools.switchTime(date, 'yyyy-MM-dd');
						date.setDate(date.getDate()-7);
						var first = Tools.switchTime(date, 'yyyy-MM-dd');
						this.form.bbb = [first, last];
					}
				},
				// 获取配置
				getOption(data) {
					return {
					  tooltip: {
					    trigger: 'axis'
					  },
					  legend: {
					  	show: false,
					    data: data.list.map(function (item) {
					    	return item.name
					    })
					  },
					  grid: {
					    left: 30,
					    right: 30,
					    top: 20,
					    bottom: 0,
					    containLabel: true
					  },
					  xAxis: {
					    type: 'category',
					    boundaryGap: false,
					    data: data.xData
					  },
					  yAxis: {
					    type: 'value',
					    min: 0,
					    max: 100,
					  },
					  series: data.list.map(function (item) {
					  	return {
					  		name: item.name,
					  		type: 'line',
					  		lineStyle: {
					  			color: item.color
					  		},
					  		symbol: 'none',
					  		smooth: true,
					  		data: item.yData
					  	}
					  })
					}
				}
			}
		})
	</script>
</body>
</html>